<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<!-- 内部样式 -->
		<style>
			*{
				/*通配符：初始化所有标签的内边距和外边距*/
				margin: 0;
				padding: 0;
			}
			.box{			/* 类选择器 */
				width:300px;
				height:300px;
				background-color: green;
				/*margin: 50px auto;*/
				margin-bottom: 120px;
			}
			.box2{
				width:300px;
				height:300px;
				background-color: pink;
				margin-top: 80px;
			}
			.bigbox{
				width:600px;
				height:600px;
				background-color: deepskyblue;
				margin-top: 100px;
				/* padding-top: 500px; */
				/* border: 1px solid black ; */
				overflow: hidden;/* hidden隐藏 */
			}
			.sbox{
				width: 300px;
				height: 300px;
				background-color: plum;
				margin-top: 100px;
			}
		</style>
		<!-- 外边距：margin
		1.概念：盒子与盒子之间的距离
		2.应用：
			2.1可以让块级盒子水平居中，前提条件是盒子有宽度，再给
			左右外边距设置为auto（自动的） -
			2.2初始化所有的标签的内外边距。
			2.3相邻块级盒子垂直外边距合并问题>一般在开发中只给其中一个盒子写
			外边距。
			 2.4嵌套块级盒子外边距塌陷问题>解决方式：
			 方式1：给父盒子添加边框
			 方式2：给父盒子添加外边距
			 方式3：给父盒子添加overflow：hidden（开发中常用）
			 -->
			
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="sbox"></div>
		</div>
	</body>
</html>

